<template>
  <div @mouseover="showset" @mouseout="hideset" :style="{color:moddata.config.fontcolor}" class="mod">
    <div>
      <div class="con">
        <div class="title" v-show="moddata.config.titleshow">
          <span>
            <i class="iconfont icon-people_fill"></i>&nbsp;{{moddata.config.title}}</span>
        </div>
        <div class="text">
          <div class="event" v-for="event in comLists" :key="event.Id" @click="enterEvent(event)">
            <img class="post" :src="event.HaiBaoUrl" alt="海报">
            <div class="desc">
              <div class="tit">
                <p>{{event.Title}}</p>
              </div>
              <p class="time">
                <i class="icon el-icon-date"></i>
                <span>会议时间：{{event.BeginDateTime}} 至 {{event.EndDateTime}}</span>
              </p>
              <p class="loca">
                <i class="icon el-icon-location-outline"></i>
                <span>会议地点：{{event.FullAddress}}</span>
              </p>
            </div>
          </div>
          <div class="event isnull" v-if="comLists.length==0">还没有创建活动</div>
          <div class="more" v-else-if="listLength<=sponsorEvents.length">
            <el-button type="primary" @click="loadMore">加载更多</el-button>
          </div>
          <div class="nomore" v-else>没有更多了</div>
        </div>
      </div>
    </div>
    <div class="mask" v-show="maskshow">
      <div class="settingbtn" @click="headset">
        <i class="el-icon-setting"></i> 设置</div>
      <div class="deletebtn" @click="deletemod">
        <i class="el-icon-delete"></i> 删除</div>
    </div>
  </div>
</template>

<script>
  import {
    mapState,
  } from 'vuex'
  export default {
    props: ["moddata", "index"],
    data: function () {
      return {
        maskshow: false,
        sponsorEvents: [],
        listLength:5
      }
    },
    created() {
      var that = this;
      $.ajax("/Event/Sponsor/GetTaskBySponsor", {
        type: "post",
        contentType: "application/json",
        headers: {
          ISGZIPDATA: "0"
        },
        data: JSON.stringify({
          sponsorId: that.parameters.sponsorId,
        }),
        success: function (data) {
          that.sponsorEvents = data.events
        },
        error: function (err) {
          console.log(err)
        }
      });
    },
    methods: {
      showset: function () {
        this.maskshow = true;
      },
      hideset: function () {
        this.maskshow = false;
      },
      headset: function () {
        this.$store.commit({
          type: 'showsetbox',
          setMod: 'setShowMod',
          index: this.index
        })
      },
      deletemod: function () {
        this.$store.dispatch('deleteMod', this.index)
      },
      enterEvent(event) {
        window.open('/Events/' + event.Id)
      },
      loadMore(){
        this.listLength = this.listLength + 5;
      }
    },
    computed: {
      ...mapState([
        "parameters"
      ]),
      comLists() {
        var list = [];
        if (!this.sponsorEvents.length) {
          return []
        }
        var i = 0;
        while (list.length < this.listLength && i < this.sponsorEvents.length) {
          if (!this.sponsorEvents[i].IsHide) {
            list.push(this.sponsorEvents[i])
          }
          i++;
        }
        return list
      }
    }
  }
</script>

<style scoped lang="less">
  .mod {
    position: relative;
  }

  .text {
    position: relative;
    .isnull {
      line-height: 184px;
      text-align: center;
      font-size: 18px;
      color: #ccc;
    }
    .nomore{
      line-height: 50px;
      text-align: center;
      font-size: 18px;
      color: #999;
    }
    .event {
      height: 184px;
      border: 1px solid #eaeaea;
      background: #ffffff;
      position: relative;
      padding: 3px;
      margin-bottom: 23px;
      cursor: pointer;
      .post {
        position: absolute;
        top: 3px;
        left: 3px;
        width: 312px;
        height: 184px;
      }
      .desc {
        height: 184px;
        margin-left: 315px;
        padding-left: 25px;
        .icon {
          font-size: 16px;
        }
        .tit {
          height: 66px;
          font-size: 20px;
          padding: 20px 30px 0 0;
          a {
            font-weight: bold;
            color: #434343;
          }
        }
        .loca {
          padding-top: 15px;
        }
      }
    }
    .event:hover {
      box-shadow: 0px 0px 10px #ccc;
    }
    .more {
      text-align: center;
    }
  }

  .title {
    padding: 0 20px;
    height: 40px;
    font-size: 16px;
    color: #434343;
    background: #f8f8f8;
    line-height: 40px;
    .iconfont {
      display: none;
    }
  }
</style>